<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      :title="model.title"
      wrapClassName="contract-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body" v-loading="loading">
        <a-row :gutter="0">
          <a-form-model
            ref="form"
            :model="form"
            :rules="rules"
            :hideRequiredMark="model.disable"
          >
            <a-col :span="24">
              <a-form-model-item label="单位工程" prop="unitWorks">
                <a-select
                  :showSearch="true"
                  :allowClear="true"
                  :placeholder="model.disable ? '' : '请选择单位工程'"
                  :disabled="model.disable"
                  v-model="form.unitWorks"
                  @blur="unitBlur"
                  @search="unitSearch"
                >
                  <a-select-option
                    :value="item"
                    v-for="(item, index) in unitList"
                    :key="index"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="分部工程" prop="divisionalWorks">
                <a-select
                  :showSearch="true"
                  :allowClear="true"
                  :placeholder="model.disable ? '' : '请选择分部工程'"
                  :disabled="model.disable"
                  v-model="form.divisionalWorks"
                  @blur="branchBlur"
                  @search="branchSearch"
                >
                  <a-select-option
                    :value="item"
                    v-for="(item, index) in branch"
                    :key="index"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="子分部工程" prop="subDivisionalWorks">
                <a-select
                  :showSearch="true"
                  :allowClear="true"
                  :placeholder="model.disable ? '' : '请选择子分部工程'"
                  :disabled="model.disable"
                  v-model="form.subDivisionalWorks"
                  @blur="sonBranchBlur"
                  @search="sonBranchSearch"
                >
                  <a-select-option
                    :value="item"
                    v-for="(item, index) in sonBranch"
                    :key="index"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="分项工程" prop="itemWorks">
                <a-select
                  :showSearch="true"
                  :allowClear="true"
                  :placeholder="model.disable ? '' : '请选择分项工程'"
                  :disabled="model.disable"
                  v-model="form.itemWorks"
                  @blur="subItemBlur"
                  @search="subItemSearch"
                >
                  <a-select-option
                    :value="item"
                    v-for="(item, index) in subItem"
                    :key="index"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="子分项工程">
                <a-select
                  :showSearch="true"
                  :allowClear="true"
                  :placeholder="model.disable ? '' : '请选择子分项工程'"
                  :disabled="model.disable"
                  v-model="form.subItemWorks"
                  @blur="sonSubItemBlur"
                  @search="sonSubItemSearch"
                >
                  <a-select-option
                    :value="item"
                    v-for="(item, index) in sonSubItem"
                    :key="index"
                  >
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="工序" prop="procedureItem">
                <a-input
                  v-model="form.procedureItem"
                  :placeholder="model.disable ? '' : '请输入工序'"
                  :disabled="model.disable"
                  :maxLength="300"
                ></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="编号" prop="code">
                <a-input
                  v-model="form.code"
                  :placeholder="model.disable ? '' : '请输入编号'"
                  :disabled="model.disable"
                  :maxLength="300"
                ></a-input>
              </a-form-model-item>
            </a-col>
          </a-form-model>
        </a-row>
      </div>
      <div class="curve-modal-footer">
        <a-button type="default" @click="closeModal()">
          {{ !model.disable ? "取消" : "返回" }}
        </a-button>
        <a-button
          type="primary"
          @click="save"
          :loading="button"
          v-if="!model.disable"
        >
          确定
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { notificationTip, _getUUID } from "@/utils";
import {
  getWorksSelect,
  getWbsSaveOrUpdate,
  getWbsDetail,
} from "@/api/wisdom-beam/quality-app";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.form.orgCode = this.model.orgCode;
          this.getWorksData();
          if (this.model.id) {
            this.getDetail();
          }
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {
        orgCode: undefined,
        unitWorks: undefined,
        divisionalWorks: undefined,
        subDivisionalWorks: undefined,
        itemWorks: undefined,
        subItemWorks: undefined,
        procedureItem: "",
        code: "",
      },
      rules: {
        unitWorks: [
          {
            required: true,
            message: "请选择单位工程",
          },
        ],
        divisionalWorks: [
          {
            required: true,
            message: "请选择分部工程",
          },
        ],
        itemWorks: [
          {
            required: true,
            message: "请选择分项工程",
          },
        ],
        procedureItem: [
          {
            required: true,
            message: "请输入工序",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入编号",
          },
        ],
      },
      button: false,
      loading: false,
      //单位工程
      unitList: [],
      //分部工程
      branch: [],
      //子分部工程
      sonBranch: [],
      //分项工程
      subItem: [],
      //子分项工程
      sonSubItem: [],
    };
  },
  methods: {
    //获取工程下拉框
    getWorksData() {
      getWorksSelect(this.model.orgCode)
        .then((res) => {
          this.unitList = res?.data?.result?.unitWorks || [];
          this.branch = res?.data?.result?.divisionalWorks || [];
          this.sonBranch = res?.data?.result?.subDivisionalWorks || [];
          this.subItem = res?.data?.result?.itemWorks || [];
          this.sonSubItem = res?.data?.result?.subItemWorks || [];
        })
        .catch();
    },
    //单位工程搜索
    unitSearch(value) {
      if (value && value.trim() != "") this.form.unitWorks = value;
      else this.form.unitWorks = undefined;
    },
    //单位工程失去焦点
    unitBlur(value = undefined) {
      if (value && value.trim() != "") this.form.unitWorks = value;
      else this.form.unitWorks = undefined;
    },
    //分部工程搜索
    branchSearch(value) {
      if (value && value.trim() != "") this.form.divisionalWorks = value;
      else this.form.divisionalWorks = undefined;
    },
    //分部工程失去焦点
    branchBlur(value) {
      if (value && value.trim() != "") this.form.divisionalWorks = value;
      else this.form.divisionalWorks = undefined;
    },
    //子分部工程搜索
    sonBranchSearch(value) {
      if (value && value.trim() != "") this.form.subDivisionalWorks = value;
      else this.form.subDivisionalWorks = undefined;
    },
    //子分部工程失去焦点
    sonBranchBlur(value) {
      if (value && value.trim() != "") this.form.subDivisionalWorks = value;
      else this.form.subDivisionalWorks = undefined;
    },
    //分项工程搜索
    subItemSearch(value) {
      if (value && value.trim() != "") this.form.itemWorks = value;
      else this.form.itemWorks = undefined;
    },
    //分项工程失去焦点
    subItemBlur(value) {
      if (value && value.trim() != "") this.form.itemWorks = value;
      else this.form.itemWorks = undefined;
    },
    //子分项工程搜索
    sonSubItemSearch(value) {
      if (value && value.trim() != "") this.form.subItemWorks = value;
      else this.form.subItemWorks = undefined;
    },
    //子分项工程失去焦点
    sonSubItemBlur(value) {
      if (value && value.trim() != "") this.form.subItemWorks = value;
      else this.form.subItemWorks = undefined;
    },

    //查询详情
    getDetail() {
      this.loading = true;
      getWbsDetail(this.model.id)
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form.unitWorks = result.unitWorks;
          this.form.divisionalWorks = result.divisionalWorks;
          this.form.subDivisionalWorks = result.subDivisionalWorks
            ? result.subDivisionalWorks
            : undefined;
          this.form.itemWorks = result.itemWorks;
          this.form.subItemWorks = result.subItemWorks
            ? result.subItemWorks
            : undefined;
          this.form.procedureItem = result.procedureItem;
          this.form.code = result.code;
          this.loading = false;
        })
        .catch((_) => {
          this.form = {};
          this.loading = false;
        });
    },
    // 保存
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.button = true;
          let { form } = this;
          let formJson = {
            orgCode: form.orgCode,
            unitWorks: form.unitWorks,
            divisionalWorks: form.divisionalWorks,
            subDivisionalWorks: form.subDivisionalWorks
              ? form.subDivisionalWorks
              : "",
            itemWorks: form.itemWorks,
            subItemWorks: form.subItemWorks ? form.subItemWorks : "",
            procedureItem: form.procedureItem,
            code: form.code,
          };
          let formdata = new FormData();
          for (let key in formJson) {
            if (formJson[key] == null) {
              formJson[key] = "";
            }
            formdata.append(key, formJson[key]);
          }
          if (this.model.title == "编辑") {
            formdata.append("id", this.model.id);
          }
          getWbsSaveOrUpdate(formdata)
            .then((res) => {
              this.closeModal();
              this.button = false;
              notificationTip(
                "success",
                this.model.title == "新增" ? "新增成功！" : "编辑成功！"
              );
              this.$parent.getTableData();
            })
            .catch((_) => {
              this.button = false;
            });
        }
      });
    },
    //关闭弹框
    closeModal() {
      this.$refs.form.resetFields();
      this.form = {
        orgCode: undefined,
        unitWorks: undefined,
        divisionalWorks: undefined,
        subDivisionalWorks: undefined,
        itemWorks: undefined,
        subItemWorks: undefined,
        procedureItem: "",
        code: "",
      };
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
//弹框
/deep/.contract-modal-container {
  .ant-modal-body {
    padding: 0;
  }
  .curve-modal-body {
    padding: 20px;
    max-height: 620px;
    .custom-scrollbar();
  }
  .curve-modal-footer {
    text-align: center;
    padding-bottom: 20px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
}
//表单
/deep/.ant-form-item {
  display: flex;
  .ant-form-item-label {
    width: 130px;
    white-space: pre-wrap;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 36px;
    line-height: 20px;
    label {
      color: #999999;
    }
  }
  .check-item-select {
    height: 86px;
    .ant-select-selection__rendered {
      height: 86px;
      .ant-select-selection__placeholder {
        margin-top: -40px !important;
      }
    }
  }
  .ant-form-item-control-wrapper {
    flex: 1;
  }
}
/deep/.ant-calendar-picker {
  width: 100%;
  min-width: unset !important;
}
</style>
